<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://lib.baomitu.com/axios/0.26.1/axios.js"></script>
    <script crossorigin="anonymous"
            integrity="sha512-1ktr2kdJH3RNHnxw1UMGhmCIdpJwaZe0UIeT5i3tlwYifbAADW8PJDaBZtDLBz7Xsd0LYyaQGbjNe0g2n3JEbg=="
            src="https://lib.baomitu.com/echarts/5.3.2-rc.1/echarts.common.js"></script>
    <style>
        .contenter {
            display: flex;
            flex-wrap: wrap;
            align-item: center;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="contenter">
    <div style="text-align: center;width: 100%">
        <h1 id="title">

        </h1>
        <script>
            setInterval(() => {
                axios.get('../like/').then(res => {
                    document.getElementById('title').innerText = `网站点赞数：${res.data.like}`
                })
            }, 3000)

        </script>
    </div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="totalCounter" style="width: 50%;height:300px;"></div>
    <div id="cake" style="width: 50%;height:300px;"></div>
    <div id="teacher" style="width: 50%;height:300px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var totalCounter = echarts.init(document.getElementById('totalCounter'));
        var cake = echarts.init(document.getElementById('cake'));
        var teacher = echarts.init(document.getElementById('teacher'));

        axios.get('../count/').then(res => {
            // 指定图表的配置项和数据
            let xdata = [], ydata = [];
            for (let i = 0; i < res.data.length; i++) {
                const dataKey = res.data[i];
                const name = dataKey.name.slice(5, 10)
                xdata.push(name);
                ydata.push(dataKey.count);
            }
            var option = {
                title: {
                    text: '累计核酸检测次数'
                },
                tooltip: {},
                legend: {
                    data: ['打卡数']
                },
                xAxis: {
                    data: xdata
                },
                yAxis: {},
                series: [
                    {
                        name: '打卡次数',
                        type: 'bar',
                        data: ydata
                    }
                ]
            };
            totalCounter.setOption(option);
            window.onresize = function () {
                totalCounter.resize()
            };
        })


        axios.get('../class_count/').then(res => {
            cakeOption = {
                tooltip: {},
                title: {
                    text: '各班级累计核酸打卡次数'
                },
                legend: {
                    data: ['打卡数']
                },
                series: [
                    {
                        name: '打卡次数',
                        type: 'pie',
                        data: res.data,
                        roseType: 'area'
                    }
                ]
            };
            cake.setOption(cakeOption);
            window.onresize = function () {
                cake.resize()
            };
        })

        // 使用刚指定的配置项和数据显示图表。
        axios.get('../teacher/count/').then(res => {
            // 指定图表的配置项和数据
            let xdata = [], ydata = [];
            for (let i = 0; i < res.data.length; i++) {
                const dataKey = res.data[i];
                const name = dataKey.name.slice(5, 10)
                xdata.push(name);
                ydata.push(dataKey.count);
            }
            var option = {
                title: {
                    text: '教工累计核酸检测次数'
                },
                tooltip: {},
                legend: {
                    data: ['打卡数']
                },
                xAxis: {
                    data: xdata
                },
                yAxis: {},
                series: [
                    {
                        name: '打卡次数',
                        type: 'bar',
                        data: ydata
                    }
                ]
            };
            teacher.setOption(option);
            window.onresize = function () {
                teacher.resize()
            };
        })
    </script>
</div>
</body>
</html>